import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF2F2F2),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          '我的',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.qr_code_scanner, color: Colors.black),
            onPressed: () {},
          ),
        ],
      ),
      body: ListView(
        children: [
          // 个人信息卡片
          Container(
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
            child: Row(
              children: [
                // 头像
                ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: Container(
                    width: 70,
                    height: 70,
                    color: Colors.purple.shade200,
                    child: Image.network(
                      'https://via.placeholder.com/70',
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) {
                        return const Icon(Icons.person,
                            size: 40, color: Colors.white);
                      },
                    ),
                  ),
                ),
                const SizedBox(width: 15),
                // 用户信息
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        '说说榜',
                        style: TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 5),
                      Row(
                        children: [
                          const Text(
                            '微信号：',
                            style: TextStyle(
                              color: Colors.grey,
                              fontSize: 14,
                            ),
                          ),
                          const Text(
                            'qqqqqq203462009',
                            style: TextStyle(
                              color: Colors.grey,
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                const Icon(Icons.chevron_right, color: Colors.grey),
              ],
            ),
          ),

          const SizedBox(height: 10),

          // 状态按钮
          Container(
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
            child: Row(
              children: [
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade300),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Row(
                    children: [
                      const Icon(Icons.add, size: 16),
                      const SizedBox(width: 5),
                      const Text('状态', style: TextStyle(fontSize: 14)),
                    ],
                  ),
                ),
                const SizedBox(width: 10),
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade300),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Row(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Container(
                          width: 16,
                          height: 16,
                          color: Colors.purple.shade200,
                          child: const Icon(Icons.person,
                              size: 10, color: Colors.white),
                        ),
                      ),
                      const SizedBox(width: 5),
                      const Text('2个朋友', style: TextStyle(fontSize: 14)),
                      const SizedBox(width: 5),
                      Container(
                        width: 8,
                        height: 8,
                        decoration: const BoxDecoration(
                          color: Colors.red,
                          shape: BoxShape.circle,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: 10),

          // 功能列表
          _buildMenuItem(
            icon: Icons.check_circle_outline,
            title: '服务',
            hasRedDot: true,
            iconColor: Colors.green,
            iconBgColor: Colors.green.withOpacity(0.1),
          ),
          const Divider(height: 1),
          _buildMenuItem(
            icon: Icons.bookmark_border,
            title: '收藏',
            iconColor: Colors.orange,
            iconBgColor: Colors.orange.withOpacity(0.1),
          ),
          const Divider(height: 1),
          _buildMenuItem(
            icon: Icons.photo_outlined,
            title: '朋友圈',
            iconColor: Colors.blue,
            iconBgColor: Colors.blue.withOpacity(0.1),
          ),
          const Divider(height: 1),
          _buildMenuItem(
            icon: Icons.credit_card_outlined,
            title: '卡包',
            iconColor: Colors.blue,
            iconBgColor: Colors.blue.withOpacity(0.1),
          ),
          const Divider(height: 1),
          _buildMenuItem(
            icon: Icons.emoji_emotions_outlined,
            title: '表情',
            iconColor: Colors.amber,
            iconBgColor: Colors.amber.withOpacity(0.1),
          ),

          const SizedBox(height: 10),

          // 设置
          _buildMenuItem(
            icon: Icons.settings,
            title: '设置',
            iconColor: Colors.blueGrey,
            iconBgColor: Colors.blueGrey.withOpacity(0.1),
          ),
        ],
      ),
      // bottomNavigationBar: BottomNavigationBar(
      //   type: BottomNavigationBarType.fixed,
      //   currentIndex: 3,
      //   selectedItemColor: Colors.green,
      //   unselectedItemColor: Colors.black,
      //   items: [
      //     BottomNavigationBarItem(
      //       icon: Stack(
      //         children: [
      //           const Icon(Icons.chat_bubble_outline),
      //           Positioned(
      //             right: 0,
      //             top: 0,
      //             child: Container(
      //               padding: const EdgeInsets.all(1),
      //               decoration: BoxDecoration(
      //                 color: Colors.red,
      //                 borderRadius: BorderRadius.circular(6),
      //               ),
      //               constraints: const BoxConstraints(
      //                 minWidth: 12,
      //                 minHeight: 12,
      //               ),
      //               child: const Text(
      //                 '2',
      //                 style: TextStyle(
      //                   color: Colors.white,
      //                   fontSize: 8,
      //                 ),
      //                 textAlign: TextAlign.center,
      //               ),
      //             ),
      //           ),
      //         ],
      //       ),
      //       label: '微信',
      //     ),
      //     const BottomNavigationBarItem(
      //       icon: Icon(Icons.person_outline),
      //       label: '通讯录',
      //     ),
      //     const BottomNavigationBarItem(
      //       icon: Icon(Icons.explore_outlined),
      //       label: '发现',
      //     ),
      //     const BottomNavigationBarItem(
      //       icon: Icon(Icons.person),
      //       label: '我',
      //     ),
      //   ],
      // ),
    );
  }

  Widget _buildMenuItem({
    required IconData icon,
    required String title,
    bool hasRedDot = false,
    required Color iconColor,
    required Color iconBgColor,
  }) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
      child: Row(
        children: [
          Container(
            width: 30,
            height: 30,
            decoration: BoxDecoration(
              color: iconBgColor,
              borderRadius: BorderRadius.circular(6),
            ),
            child: Icon(icon, color: iconColor, size: 20),
          ),
          const SizedBox(width: 15),
          Expanded(
            child: Text(
              title,
              style: const TextStyle(fontSize: 16),
            ),
          ),
          if (hasRedDot)
            Container(
              width: 8,
              height: 8,
              decoration: const BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            ),
          const SizedBox(width: 5),
          const Icon(Icons.chevron_right, color: Colors.grey),
        ],
      ),
    );
  }
}
